<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 450px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            font-weight: 600;
            font-size: 28px;
        }
        
        .logo {
            margin-bottom: 20px;
        }
        
        .logo-icon {
            font-size: 48px;
            color: #2575fc;
            margin-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }
        
        input {
            width: 100%;
            padding: 14px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        input:focus {
            border-color: #2575fc;
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2);
        }
        
        button {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .loading {
            display: none;
            margin-top: 20px;
            color: #2575fc;
            font-size: 16px;
        }
        
        .error {
            color: #e74c3c;
            margin-top: 15px;
            display: none;
            background-color: rgba(231, 76, 60, 0.1);
            padding: 10px;
            border-radius: 5px;
        }
        
        .success {
            color: #2ecc71;
            margin-top: 15px;
            display: none;
            background-color: rgba(46, 204, 113, 0.1);
            padding: 10px;
            border-radius: 5px;
        }
        
        .spinner {
            border: 3px solid rgba(37, 117, 252, 0.3);
            border-radius: 50%;
            border-top: 3px solid #2575fc;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .footer {
            margin-top: 25px;
            color: #777;
            font-size: 14px;
        }
        
        .debug-info {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 10px;
            margin-top: 15px;
            font-size: 12px;
            text-align: left;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .debug-toggle {
            background: none;
            border: none;
            color: #2575fc;
            text-decoration: underline;
            cursor: pointer;
            font-size: 12px;
            margin-top: 10px;
            width: auto;
            padding: 0;
            box-shadow: none;
        }
        
        .debug-toggle:hover {
            transform: none;
            box-shadow: none;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .remember-me input {
            width: auto;
            margin-right: 8px;
        }
        
        .remember-me label {
            margin-bottom: 0;
            font-weight: normal;
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 30px 20px;
            }
            
            h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <div class="logo-icon">🔒</div>
            <h1>用户登录</h1>
        </div>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            
            <div class="remember-me">
                <input type="checkbox" id="remember" name="remember">
                <label for="remember">记住登录状态</label>
            </div>
            
            <button type="submit">登录</button>
        </form>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            正在登录，请稍候...
        </div>
        <div class="error" id="error"></div>
        <div class="success" id="success"></div>
        
        <!-- 调试信息 -->
        <button class="debug-toggle" id="debugToggle">显示调试信息</button>
        <div class="debug-info" id="debugInfo" style="display: none;">
            <strong>调试信息:</strong><br>
            当前页面URL: <span id="currentUrl"></span><br>
            请求URL: <span id="requestUrl"></span><br>
            响应状态: <span id="responseStatus"></span><br>
            响应预览: <span id="responsePreview"></span>
        </div>
        
        <div class="footer">
            <p>演示系统 | 发送GET请求到/Login</p>
        </div>
    </div>

    <script>
        // 显示当前页面URL用于调试
        document.getElementById('currentUrl').textContent = window.location.href;
        
        // 调试信息切换
        document.getElementById('debugToggle').addEventListener('click', function() {
            const debugInfo = document.getElementById('debugInfo');
            if (debugInfo.style.display === 'none') {
                debugInfo.style.display = 'block';
                this.textContent = '隐藏调试信息';
            } else {
                debugInfo.style.display = 'none';
                this.textContent = '显示调试信息';
            }
        });
        
        // 表单提交处理
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;
            
            // 验证输入
            if (!username || !password) {
                showError('请输入用户名和密码');
                return;
            }
            
            // 显示加载状态
            document.getElementById('loading').style.display = 'block';
            document.getElementById('error').style.display = 'none';
            document.getElementById('success').style.display = 'none';
            document.getElementById('responseStatus').textContent = '请求中...';
            document.getElementById('responsePreview').textContent = '';
            
            // 构建GET请求URL
            const baseUrl = window.location.origin;
            const url = `${baseUrl}/Login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&remember=${remember}`;
            
            // 显示请求URL用于调试
            document.getElementById('requestUrl').textContent = url;
            
            // 发送GET请求
            fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                document.getElementById('responseStatus').textContent = `状态码: ${response.status}`;
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态: ${response.status}`);
                }
                return response.text();
            })
            .then(html => {
                // 隐藏加载状态
                document.getElementById('loading').style.display = 'none';
                
                // 显示响应预览
                document.getElementById('responsePreview').textContent = 
                    html.length > 100 ? html.substring(0, 100) + '...' : html;
                
                // 显示成功消息
                document.getElementById('success').textContent = '登录成功! 正在跳转...';
                document.getElementById('success').style.display = 'block';
                
                // 使用Blob URL跳转到后端返回的HTML
                const blob = new Blob([html], {type: 'text/html'});
                const blobUrl = URL.createObjectURL(blob);
                
                // 延迟一下让用户看到成功消息
                setTimeout(() => {
                    window.location.href = blobUrl;
                }, 1000);
            })
            .catch(error => {
                // 隐藏加载状态
                document.getElementById('loading').style.display = 'none';
                
                // 显示错误信息
                showError('登录失败: ' + error.message);
                
                // 提供更多调试信息
                console.error('请求失败:', error);
                console.log('请求URL:', url);
            });
        });
        
        // 显示错误信息的辅助函数
        function showError(message) {
            const errorElement = document.getElementById('error');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }
        
        // 自动填充测试数据（仅用于演示）
        document.addEventListener('DOMContentLoaded', function() {
            // 检查URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const test = urlParams.get('test');
            
            if (test === '1') {
                document.getElementById('username').value = 'demo_user';
                document.getElementById('password').value = 'demo_password';
            }
        });
    </script>
</body>
</html>